<template>
  <div class="app-container">
    <el-container style="border: 1px solid #eee">
      <el-header>
        <div style="margin-top: 15px;">
          <el-input v-model="kwInput" placeholder="输入关键词进行搜索" class="" @keyup.native.enter="handleSearch">
            <el-select slot="prepend" v-model="select_web" placeholder="选择网站" @change="handleSearch">
              <el-option label="所有" value="-1" />
              <el-option
                v-for="(item,index) in dataWebs"
                :key="index"
                :label="item.domain"
                :value="item.id"
              />
            </el-select>
            <el-button slot="append" type="success" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </el-input>
        </div>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          border
          :default-sort="{prop: 'product_count', order: 'descending'}"
          style="width: 100%"
          @sort-change="handleSort"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            fixed
            prop="web__domain"
            label="域名"
          />
          <el-table-column
            fixed
            sortable="custom"
            prop="category_name"
            label="目录"
          >
            <template slot-scope="scope">
              <a :href="scope.row.url" target="_blank">{{ scope.row.category_name }}</a>
            </template>
          </el-table-column>
          <el-table-column
            label="产品数量"
            sortable="custom"
            prop="product_count"
            width="180"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleProducts(scope.row)">{{ scope.row.product_count }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="is_finished"
            sortable="custom"
            label="是否抓取完成"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_finished"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="ChangeStatus(scope.row)"
              />
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="tableData.length"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[10,20,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-main>
    </el-container>

  </div>
</template>

<script>
import { GetWebCategory, GetWebs, UpdateWebCategory } from '@/api/erp/crawlproduct'

import qs from 'qs'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}

export default {
  data() {
    return {
      tableData: [],
      dataWebs: [],
      select_web: '-1',
      listLoading: true,
      currentOpRow: '',
      order_by: '',
      order_desc: '',
      // pagination
      kwInput: '',
      pagesize: 10,
      page: 1,
      total: 0
    }
  },

  created() {
    this.getList()
    GetWebs().then((response) => {
      this.dataWebs = response.data
    }).catch(error => {
      console.log(error)
    })
  },
  methods: {
    // pageSize 改变后触发 table 更新
    getList() {
      this.listLoading = true
      GetWebCategory(null, qs.stringify({
        kw: this.kwInput,
        web: this.select_web,
        order_by: this.order_by,
        order_desc: this.order_desc,
        pagesize: this.pagesize,
        page: this.page
      }))
        .then(response => {
          this.tableData = response.data.data
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleProducts(row) {
      this.$router.push({ name: 'crawlviewproduct', query: { k: row.category_name, w: row.web_id }})
      console.log(row)
    },
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    ChangeStatus(row) {
      UpdateWebCategory(JSON.stringify(row)).then((response) => {
        this.$notify({
          title: '修改成功',
          type: 'success'
        })
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .app-container >>> .el-select .el-input {
    width: 330px;
  }

  .app-container >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .app-container >>> .text {
    font-size: 14px;
  }
</style>
